<template>
  <div class="course-class">
  	<!-- 课程分类 -->
  	<div class="nav-tap" :class="(show) ? 'course-active' : ''">
  		<span class="span-tap" :class="(tabIndex === 1) ? 'active' : ''" @click="tranShow(1)">综合排序 <img v-if="tabIndex === 1" src="@/assets/up-arrow.png"><img v-else src="@/assets/down-arrow.png"></span>
  		<span v-for="(item, index) in classifys" :key="index" class="span-tap" :class="(tabIndex === index+2) ? 'active' : ''" @click="tranShow(index+2)">{{item.title}} <img v-if="tabIndex === index+2" src="@/assets/up-arrow.png"><img v-else src="@/assets/down-arrow.png"></span>  		
  	</div>
  	<div class="course-item">
  		<div class="item-list" v-for="(item, index) in audio_lsits" :key="index" @click="router({path: '/payDetials', query: {id: item.id}})">
    		<div class="img">
    			<img :src="item.img">
    		</div>
    		<div class="con">
    			 <p class="tip">{{item.title}}</p>
    			 <p class="video-num">
    			 	<span class="time">
    			 		<img src="@/assets/yunbangkechen4.png"> {{item.audio_long}}
    			 	</span>
    			 	<span class="price">￥{{item.price}}</span>
    			 </p>
    		</div>
    	</div>
  	</div>
    <div class="course-class-transfer" v-transfer-dom>
      <popup v-model="show" @on-hide="close">
        <div class="popup0" v-if='tabIndex <= 1'>
          <p @click="changeList('auto')">综合排序</p>
          <p @click="changeList('money')">价格最低</p>
          <p @click="changeList('play')">最多点播</p>
        </div>
        <div class="popup0" v-else-if='tabIndex == 10'>
        </div>
        <div class="popup0" v-else>
          <p v-for="(item, index) in _child" :key="index" @click="changeList(item.id)">{{item.title}}</p>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { Group, Popup, TransferDom } from 'vux'
import { pay_audio_lsit, pay_audio_classify, baseUrl } from '@/api/api'
export default {
  directives: {
    TransferDom
  },
  components: {
  	Group,
  	Popup
  },
  data () {
    return {
    	show: false,
    	tabIndex: 0,
    	classifys: [],
    	_child: [],
    	class: '',
    	audio_lsits: [],
    }
  },
  created () {
  	this.cate_id = this.$route.query.id
		this.pay_audio_lsits()
		this.pay_audio_classifys()
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    tranShow (index) {
    	this.tabIndex = index
    	this.show = !this.show
    	if(index>1){
    		this._child = this.classifys[index-2]._child
    	}
    },
    close () {
    	this.tabIndex = 10
    },
    changeList (_class) {
			this._class = _class
    	this.show = !this.show
			this.audio_lsits = []
			this.pay_audio_lsits()			
    },
    pay_audio_lsits () {
    	var jsonData = {
    		cate: this.cate_id,
    		class: this._class
    	}
    	console.log(jsonData)
    	pay_audio_lsit(jsonData).then((res) => {
    		this.audio_lsits = res.data.info
    		console.log(res)
    	}).catch((err) => {
    		console.log(err)
    	})
    },
    pay_audio_classifys () {
    	pay_audio_classify().then((res) => {
    		this.classifys = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    }
  }
}
</script>
<style lang="stylus" scoped>
	.course-class
		.course-active			
			position fixed
			top 0
			width 100%
			background-color #fff
			z-index 9999
		.nav-tap
			display flex
			padding 1.5rem 0
			border-bottom 1px solid #e5e5e5
			span.span-tap
				flex 1
				text-align center
				font-size 1.3rem
				color #333
				position relative
				img
					display inline-block
					height .4rem
					width auto
					vertical-align middle
			span.active
				color #FF659B
		.course-item
			.item-list
				display flex
				padding 2rem 0
				margin 0 1.5rem
				position relative
				border-bottom 1px solid #e6e6e6
				.img
					width 12rem
					min-width 12rem
					max-width 12rem
					height 8rem
					border-radius .4rem
					overflow hidden
					margin-right 1.5rem
					img
						width 100%
						height 100%
				.con
					position relative
					flex 1
					.tip
						font-weight bold
						font-size: 1.3rem;
						line-height: 2.4rem;
						color: #666;
					.video-num
						display flex
						width 100%
						line-height: 1.4rem;
						font-size: 1.2rem;
						color: #999;
						position: absolute;
						bottom: 0.3rem;
						.time
							color #999
							font-size 1.2rem
							display flex
							min-width 50%
							img
								width 1.4rem
								height 1.4rem
								margin-right .8rem
						.price
							color #FF659B
							line-height 1.4rem
							font-size 1.5rem
							font-weight bold
							min-width 50%
							text-align right
</style>